// Route - 路由组件
import { Route, Link, NavLink } from "react-router-dom";

// 关于页面组件
function About() {
  return <h4>About</h4>;
}

// 首页组件
function Home() {
  return <h4>Home</h4>;
}

export default function App() {
  return (
    <div>
      <h1>App</h1>
      {/* 
        Link 组件 与 NavLink 组件
            1. 两者都是可以实现路由的导航（路由跳转）
            2. 如果要实现高亮效果的话，要使用 NavLink 它在匹配的时候会给生成的 a 标签添加一个 active 的类名
      */}
      <Link to="/about">关于页面</Link>
      <br />
      <Link to="/home">首页</Link>
      <br />

      <NavLink to="/about">关于页面</NavLink>
      <br />
      <NavLink to="/home">首页</NavLink>
      <hr />

      {/* 
        Route 组件 - 路由组件，用于描述路由规则
          path - url的pathname部分路径
          component - 组件

          作用：当 url 地址能匹配我的path时，我的component设置的组件就会渲染在这儿。
      */}
      <Route path="/about" component={About} />
      <Route path="/home" component={Home} />
    </div>
  );
}
